<%--
  Created by IntelliJ IDEA.
  User: 猽
  Date: 2020/12/22
  Time: 15:59
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" language="java" %>

<!DOCTYPE html>
<html>
<head>
    <title>用户列表</title>
    <%-- 引入css样式 --%>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/layui/css/layui.css">
</head>
<body>
<form class="layui-form layui-form-pane">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">
                用户名
            </label>
            <div class="layui-input-inline" style="width: 120px">
                <input type="text" class="layui-input" id="username" autocomplete="off">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">
                姓名
            </label>
            <div class="layui-input-inline" style="width: 120px">
                <input type="text" class="layui-input" id="realname" autocomplete="off">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">
                角色
            </label>
            <div class="layui-input-inline" style="width: 120px">
                <select id="role">
                    <option value="">角色</option>
                    <option value="1">管理员</option>
                    <option value="2">业务员</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">
                状态
            </label>
            <div class="layui-input-inline" style="width: 120px">
                <select id="deleted">
                    <option value="">状态</option>
                    <option value="1">在职</option>
                    <option value="2">离职</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <button class="layui-btn" id="searchBtn" type="button">查询</button>
            <button class="layui-btn layui-btn-primary" type="reset">重置</button>
        </div>
    </div>
</form>
<hr>
<table id="dataTable" lay-filter="dataTableFilter"></table>
<%-- 头工具栏 --%>
<script type="text/html" id="headerBtns">
    <div class="layui-btn-group">
        <button class="layui-btn layui-btn-sm" lay-event="add">
            <i class="layui-icon layui-icon-add-1"></i>
            添加员工
        </button>
    </div>
</script>
<%-- 行工具栏 --%>
<script type="text/html" id="rowBtns">
    <div class="layui-btn-group">
        <button class="layui-btn layui-btn-sm layui-btn-warm" lay-event="resetPwd">
            <i class="layui-icon layui-icon-refresh-3"></i>
            重置密码
        </button>
        {{# if(d.deleted == 1){ }}
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="del">
            <i class="layui-icon layui-icon-delete"></i>
            离职
        </button>
        {{# }else if(d.deleted == 2){ }}
        <button class="layui-btn layui-btn-sm layui-btn-danger layui-btn-disabled">
            <i class="layui-icon layui-icon-delete"></i>
            离职
        </button>
        {{# } }}
    </div>
</script>

    <script type="text/html" id="editTpl">
    <form class="layui-form layui-form-pane" lay-fiter="editFormFilter" style="margin-left: 20px;margin-top: 20px">
        <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-inline">
                <input type="text" name="realname" class="layui-input" autocomplete="off" placeholder="姓名" lay-verify="required" lay-reqText="姓名不能为空">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline">
                <input type="text" name="username" class="layui-input" autocomplete="off" placeholder="用户名" lay-verify="required" lay-reqText="用户名不能为空">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-inline">
                <input type="text" name="password" value="123456" readonly class="layui-input"  >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">角色</label>
            <div class="layui-input-inline" style="width: 210px">
                <input type="radio" name="role" title="业务员"  value="2" checked >
                <input type="radio" name="role" title="管理员"  value="1" >
            </div>
        </div>
        <button id="subBtn" type="button" lay-submit lay-filter="subBtnFilter" style="display: none"></button>
    </form>
</script>

<script src="${pageContext.request.contextPath}/resources/layui/layui.js"></script>
<script>
    layui.use(['form','layer','jquery','table'],function () {
        let form = layui.form;
        let layer = layui.layer;
        let $ = layui.jquery;
        let table = layui.table;
        //项目根目录
        let cxt = "${pageContext.request.contextPath}";

        //全局设置
        $.ajaxSetup({
            dataFilter:function (rs) {
                //将返回结果转化为JSON 数据拦截
                let data = JSON.parse(rs);
                //响应码 不是200  是需要登录时 则跳转到登录
                if (data.code == 400000001){
                    layer.msg("登录失效,3秒后重新登录");
                    setTimeout(function () {
                        window.parent.location.href = "index.jsp";
                    },3000)
                    return rs;
                }
                return rs;
            }
        });

        //渲染表格
        let tabOpt = {
            id:"dataTableId",
            elem:"#dataTable",
            url:cxt+"/user.do?service=page",
            page:true,
            toolbar:"#headerBtns",
            cols:[[
                {type:"checkbox",fixed:"left"},
                {title:"用户名",field:"username"},
                {title:"姓名",field:"realname"},
                {title:"角色",field:"role",templet:function (d) {
                        let role = d.role;
                        if (role == 1){
                            return "<b style='color:mediumvioletred'>管理员</b>";
                        }else if (role == 2){
                            return "<b style='color:lightseagreen'>业务员</b>";
                        }
                    }},
                {title:"状态",field:"deleted",templet:function (d) {
                        let deleted = d.deleted;
                        if (deleted == 1){
                            return "<b style='color:lightseagreen'>在职</b>";
                        }else if (deleted == 2){
                            return "<b style='color:lightslategrey'>离职</b>";
                        }
                    }},
                {title:"图像",field:"img",event:"showImg",templet:function (d) {
                        return "<button class='layui-btn layui-btn-xs'>查看</button>";
                    }},
                {title:"操作",toolbar:"#rowBtns"},

            ]],
            parseData:function (rs) {
                return {
                    code : rs.code,
                    msg : rs.msg,
                    count : rs.data.count,
                    data: rs.data.data
                }
            },
            response:{
                statusCode: 200
            }
        };
        let tabIns = table.render(tabOpt);

        //搜索
        $("#searchBtn").click(function () {
            let username = $("#username").val();
            let realname = $("#realname").val();
            let deleted = $("#deleted").val();
            let role = $("#role").val();
            //表格重载
            tabIns.reload({
                where:{
                    username:username,
                    realname:realname,
                    deleted:deleted,
                    role:role
                }
            });
        });

        //表格行工具栏监听事件
        table.on("tool(dataTableFilter)",function (d) {
            let event =d.event;//获取事件类型
            let rowData = d.data;//获取行数据
            console.log(d.data.deleted);
            //事件分支
            if (event == "resetPwd"){
                resetPwd(rowData);
            }else if (event == "del"){
                del(rowData);
            }else if (event == "showImg") {
                showImg(rowData);
            }

        })

        /**
         * 重置密码
         * @param rowData
         */
        function resetPwd(rowData) {
            layer.confirm("你确定要重置密码吗？",function (index) {
                let param = {"service":"resetPwd","id":rowData.id};
                $.get(cxt+"/user.do",param,function (rs) {
                    //将业务消息展示
                    layer.msg(rs.msg);
                    if(rs.code !=200){
                        return;
                    }
                    //刷新表格
                    $("#searchBtn").click();
                })
            });
        }

        /**
         * 员工离职
         * @param rowData
         */
        function del(rowData) {

            //检验员工数据状态
            if (rowData.deleted == 2){
                console.log(rowData.deleted);
                layer.msg("该员工已是离职状态");
                return false;
            }
            layer.confirm("确定员工已离职吗？", function (index) {
                let param = {"service": "delete", "id": rowData.id};
                $.get(cxt + "/user.do", param, function (rs) {
                    //将业务消息展示
                    layer.msg(rs.msg);
                    if (rs.code != 200) {
                        return;
                    }
                    //刷新表格
                    $("#searchBtn").click();
                })
            });
        }

        function showImg(rowData){
            if(!rowData.img){
                layui.msg("该员工没有设置头像！");
                return false;
            }
            let img = rowData.img;
            let photoOpt = {
                title:"员工头像",
                start:0,//初始显示的图片序号，默认0
                data:[//相册包含的图片，数组格式
                    {
                        alt:rowData.realname,
                        src:cxt+"/"+img,//原图地址
                        thumb:cxt+"/"+img,//缩略图地址
                    }
                ]
            }
            layer.photos({
                photos:photoOpt,
                anim:1//0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
            });
        }

        //表格头工具栏监听事件
        table.on("toolbar",function (d) {
            let event = d.event;
            if(event == "add"){
                add();
            }
        });
        /**
         * 新增员工
         */
        function add() {
            let layerOpt = {
                title:"编辑",
                type:1,//页面
                content:$("#editTpl").html(),
                area:['360px','390px'],
                btn:['确认','取消'],
                btnAlign: 'c',
                success:function (layero,index) {
                    //渲染表单
                    form.render("radio");
                    //表格的提交监听
                    form.on("submit(subBtnFilter)",function (d) {
                        let formData = d.field;
                        $.post(cxt+"/user.do?service=add",formData,function (rs) {
                            layer.msg(rs.msg);
                            if (rs.code != 200){
                                return false;
                            }
                            //关闭弹层
                            layer.close(index);
                            //刷新表格
                            $("#searchBtn").click();
                        })
                    })
                },
                yes:function (index,layero) {
                    //手动触发提交按钮 点击
                    $("#subBtn").click();
                }
            };
            layer.open(layerOpt);
        }






    })
</script>

</body>
</html>

